<template>
  <div class="address">
    <van-nav-bar title="收获地址" left-arrow @click-left="$router.back()" />
    <div v-if="this.list===null?'true':''" class="address_flash">
      <img
        src="//jp.juancdn.com/jpwebapp_v1/images_v1/empty_icons/user_address.png?a98391eb-1&sv=449ce9ee"
        alt
      />
      <p>还没有收货地址哦</p>
      <a href="/address_edit">添加地址</a>
    </div>
    <div v-else>
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        @add="onAdd"
        @select="onselect"
        @edit="onEdit"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flash: false,
      chosenAddressId: "",
      list: []
    };
  },
  created() {
    this.getaddress();
  },
  methods: {
    onAdd() {
      this.$router.push("/address_edit");
    },
    getaddress() {
      this.$http.get("/address_index").then(res => {
        //   console.log(res);
        res.data.data.forEach(v => {
          this.list.push({
            id: v.id,
            name: v.name,
            tel: v.tel,
            address: v.province + v.city + v.county + v.addressDetail
          });
          if (v.isDefault === 1) {
            this.chosenAddressId = v.id;
          }
        });
      });
    },
    onEdit(item) {
      // console.log(item.id)
      this.$router.push({ path: "/address_edit", query: { id: item.id } });
    },
    onselect(item) {
      // console.log(item.id,index)
      let data = {
        id: item.id,
        meta: 1234
      };
      this.$http.post("/address_add", data).then(res => {
        console.log(res.data);
      });
    }
  }
};
</script>
<style lang="less" >
.address {
  .address_flash {
    width: 100%;
    text-align: center;
    margin: 20px 0;
    clear: both;
    img {
      display: block;
      margin: 0 auto;
      margin-bottom: 12px;
      width: 140px;
    }
    p {
      font-size: 20px;
    }
    a {
      display: inline-block;
      width: 150px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      color: #ff464e;
      border: 1px solid currentColor;
      text-align: center;
    }
  }
}
</style>